import Watcher from "./observe/watcher.js";
import { patch } from "./vdom/patch.js";
export function lifecycleMixin(Vue) {
  Vue.prototype._update = function (vnode) {
    // 现在就需要通过虚拟节点， 将真实的dom渲染出来 
    const vm = this;
    vm.$el = patch(vm.$el, vnode); // 需要用虚拟节点创建出真实节点  替换掉 真实的$el
    // console.log(vnode);
    // console.log(
    //   vm.$el
    // );
  }
}

export function mountComponent(vm, el) {
  const options = vm.$options; // render
  vm.$el = el; // 真实的dom元素

  callHook(vm, "beforeMount")
  console.log("mountComponent");

  // 渲染页面
  // 渲染函数
  let updateComponent = () => { // 无论是渲染还是更新都会调用此方法
    // 返回的是虚拟dom
    // vm._render();
    vm._update(vm._render());

    // Watcher: 用来渲染的
    // vm._render: 通过解析的render方法， 渲染出虚拟dom  （_c, _v, _s是啥东西， 需要定义）
    // vm._update: 通过虚拟dom， 创建真实的dom

  }

  // 渲染watcher， 每个组件都有一个watcher，   vm.$watch(()=> {})
  new Watcher(vm, updateComponent, () => { }, true); // true表示他是一个渲染watcher

  callHook(vm, "mounted")
}

export function callHook(vm, hook) {
  const handlers = vm.$options[hook];
  if (handlers) {
    for (let i = 0; i < handlers.length; i++) {
      const handler = handlers[i];
      handler.call(vm);
    }
  }
}